<template>
    <div>
        <div id="map" style="height: 100vh;"></div>
    </div>
</template>


<script>
export default {
    mounted() {
        // 初始化地图
        this.initMap();
    },
    data() {
        return {
        }
    },

    methods: {
        detail() {
            this.$message.success('info')
        },
        initMap() {
            const L = require('leaflet');
            const map = L.map('map').setView([23.0207, 113.7462], 12);

            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);

            // 创建自定义图标
            const customIcon = L.icon({
                iconUrl: 'https://files.codelife.cc/blog/avatar/641952bc46f825e26b36fde6.jpeg?t=1709970504540&x-oss-process=image/resize,limit_0,m_fill,w_40,h_40/quality,q_92/format,webp', // 图标的 URL
                iconSize: [32, 32], // 图标的大小
                iconAnchor: [16, 32], // 图标的锚点位置
                popupAnchor: [0, -32] // 弹出框的锚点位置
            });

            L.marker([23.05, 113.88], { icon: customIcon })
                .addTo(map)
                .bindPopup('测试')
                .openPopup();

            // 创建跳转按钮控件
            // const jumpButton = L.Control.extend({
            //     options: {
            //         position: 'topleft' // 按钮位置
            //     },
            //     onAdd: function () {
            //         const container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
            //         const button = L.DomUtil.create('a', 'leaflet-control-button', container);
            //         button.href = '#';
            //         button.title = '跳转到指定位置';
            //         button.innerHTML = '东莞';

            //         L.DomEvent.on(button, 'click', (e) => {
            //             L.DomEvent.stopPropagation(e);
            //             L.DomEvent.preventDefault(e);

            //             // 跳转到指定位置
            //             map.setView([23.0207, 113.7462], 12); // 替换成你想跳转的经纬度和缩放级别
            //         });

            //         return container;
            //     }
            // });
            // // 将控件添加到地图上
            // map.addControl(new jumpButton());

            // 创建定位按钮控件
            const locateButton = L.Control.extend({
                options: {
                    position: 'topleft' // 按钮位置
                },
                onAdd: function () {
                    const container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
                    const button = L.DomUtil.create('a', 'leaflet-control-button', container);
                    button.href = '#';
                    button.title = '定位到我的位置';
                    button.innerHTML = '定位';

                    L.DomEvent.on(button, 'click', (e) => {
                        L.DomEvent.stopPropagation(e);
                        L.DomEvent.preventDefault(e);

                        if (navigator.geolocation) {
                            navigator.geolocation.getCurrentPosition(position => {
                                const lat = position.coords.latitude;
                                const lng = position.coords.longitude;
                                map.setView([lat, lng], 15);
                                L.marker([lat, lng], { icon: customIcon })
                                    .addTo(map)
                                    .bindPopup('你的位置')
                                    .openPopup();
                            }, error => {
                                alert('无法获取位置信息');
                                console.log(error)
                            });
                        } else {
                            alert('Geolocation 不被支持');
                        }
                    });

                    return container;
                }
            });

            map.addControl(new locateButton());

            // 创建一个按钮来显示东莞市轮廓
            const showOutlineButton = L.Control.extend({
                options: {
                    position: 'topleft'
                },
                onAdd: function () {
                    const container = L.DomUtil.create('div', 'leaflet-bar leaflet-control');
                    const button = L.DomUtil.create('a', 'leaflet-control-button', container);
                    button.href = '#';
                    button.title = '显示东莞市轮廓';
                    button.innerHTML = '东莞';

                    L.DomEvent.on(button, 'click', async (e) => {
                        L.DomEvent.stopPropagation(e);
                        L.DomEvent.preventDefault(e);

                        try {
                            // 获取在线 GeoJSON 数据
                            const response = await fetch('https://geo.datav.aliyun.com/areas_v3/bound/441900.json'); // 替换为实际的 GeoJSON 数据 URL
                            const geoJsonData = await response.json();

                            // 加载并显示 GeoJSON 数据
                            L.geoJSON(geoJsonData, {
                                style: {
                                    color: '#ff7800',
                                    weight: 2,
                                    opacity: 0.65
                                }
                            }).addTo(map);

                            // 设置地图视图到东莞市轮廓
                            map.fitBounds(L.geoJSON(geoJsonData).getBounds());
                        } catch (error) {
                            alert('加载 GeoJSON 数据失败');
                        }
                    });

                    return container;
                }
            });

            map.addControl(new showOutlineButton());
            L.control.locate().addTo(map);
        }
    }
}

</script>

<style scoped>
.map {
    width: 100%;
    height: 600px;
}
</style>